import React from 'react'
import Mystyle from "./businessDetail.module.css"
import Cart from '../../components/cart'
// import data from "../../data/data.json"
import store from '../../store'
import { useState } from "react"
import { useLocation } from 'react-router-dom'
export default function BusinessDetail() {
    let { goods } = store.getState().data;
    let { search } = useLocation()
    let urlSearch = new URLSearchParams(search);
    // console.log(urlSearch.getAll("a"));
    // console.log(urlSearch.getAll("b"));
    let product = goods[urlSearch.getAll("a")].foods[urlSearch.getAll("b")]
    // console.log(product);
    let [rating, setRating] = useState(product);
    let ratings1 = rating.ratings
    let [ratings, setRatings] = useState(rating.ratings);
    function timeTrans(today) {
        var DD = String(today.getDate()).padStart(2, '0'); // 获取日
        var MM = String(today.getMonth() + 1).padStart(2, '0'); //获取月份，1 月为 0
        var yyyy = today.getFullYear(); // 获取年

        // 时间
        var hh = String(today.getHours()).padStart(2, '0');       //获取当前小时数(0-23)
        var mm = String(today.getMinutes()).padStart(2, '0');     //获取当前分钟数(0-59)
        var ss = String(today.getSeconds()).padStart(2, '0');     //获取当前秒数(0-59)
        let today1 = yyyy + '-' + MM + '-' + DD + ' ' + hh + ':' + mm + ':' + ss;
        return today1
    }
    function all() {
        // console.log("!");
        setRatings(ratings1)
    }
    function agree() {
        setRatings(ratings1.filter((item) => item.rateType == 1))
    }
    function unagree() {
        setRatings(ratings1.filter((item) => item.rateType == 0))
    }
    return (
        <div className={Mystyle.cotainer}>
            <div className={Mystyle.headImg} style={{ backgroundImage: `url(${product.image})` }}></div>
            <div className={Mystyle.headTextContainer}>
                <p className={Mystyle.headText1}>{product.name}</p>
                <p className={Mystyle.headText2}>月售{product.sellCount}份 好评率{product.rating}%</p>
                <p className={Mystyle.headText3}>￥{product.price}  <span>{product.oldPrice}</span> <div>加入购物车</div></p>
            </div>
            <div className={Mystyle.hr}></div>
            <div className={Mystyle.introduce}>
                <p>商品介绍</p>
                <div>{product.info}</div>
            </div>
            <div className={Mystyle.hr}></div>
            <div className={Mystyle.comment}>
                <p>商品评价</p>
                <div className={Mystyle.Content}>

                    <button onClick={all} >全部 {ratings1.length}</button>
                    <button onClick={agree} >推荐 {(ratings1.filter((item) => item.rateType == 1)).length} </button>
                    <button onClick={unagree}>吐槽 {(ratings1.filter((item) => item.rateType == 0)).length} </button>
                </div>
                <hr />
                <div className={Mystyle.ContentTail} > <button>√</button> &nbsp;只看有用的评价</div>
                <hr />
            </div>

            {
                ratings.map((item) => {
                    return <div className={Mystyle.Allcomment}>
                        <div className={Mystyle.AllcommentH}><span>{timeTrans(new Date(item.rateTime))}</span> <span className={Mystyle.AllcommentH_right}>{item.username}  <img src={item.avatar} alt="" /></span></div>
                        <p>🤟{item.text}</p>
                        <hr />
                    </div>
                })
            }
            <Cart />
        </div>
    )
}
